<template>
    <div class="app-container">
      <el-card class="box-card">
        <div class="checkedBox">
          <span>时间：</span>
          <el-date-picker
            v-model="timers"
            type="daterange"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
			value-format="yyyy-MM-dd"
            align="right">
          </el-date-picker>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button type="primary" @click="handleReset">重置</el-button>
        </div>
        <div class="infoBox">
			<div class="info">
				<span>收入（M豆）：</span>
				<span>{{ info.income }}</span>
			</div>
			<div class="info">
				<span>支出（M豆）：</span>
				<span>{{ info.outcome }}</span>
			</div>
			<div class="info">
				<span>单抽次数：</span>
				<span>{{ info.once }}</span>
			</div>
			<div class="info">
				<span>十抽次数：</span>
				<span>{{ info.ten_times }}</span>
			</div>
			<div class="info">
				<span>百抽次数：</span>
				<span>{{ info.hundred_times }}</span>
			</div>
		</div>
      </el-card>
  
    </div>
</template>
  
<script>
    import { statistics } from '@/api/mokaCrystal'
  
  	export default {
        name: 'anchorList',
        components: {},
        data() {
        return {
			info: {
				income: 0,
				outcome: 0,
				once: 0,
				ten_times: 0,
				hundred_times: 0,
			},
            listQuery: {
              page: 1,
              perPage: 10
            },
            timers: '',
			pickerOptions: {
				shortcuts: [{
					text: '最近一周',
					onClick(picker) {
					const end = new Date();
					const start = new Date();
					start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
					picker.$emit('pick', [start, end]);
					}
				}, {
					text: '最近一个月',
					onClick(picker) {
					const end = new Date();
					const start = new Date();
					start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
					picker.$emit('pick', [start, end]);
					}
				}, {
					text: '最近三个月',
					onClick(picker) {
					const end = new Date();
					const start = new Date();
					start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
					picker.$emit('pick', [start, end]);
					}
				}]
			},
        }
    },
    created() {
		this.listQuery.pool_id = this.$route.query.poolId
		const date = new Date()
		let month,year,day
		if(date.getDate() - 14 < 0) {
			if(!date.getMonth()) {
				year = date.getFullYear() - 1
				month = 12
				day = new Date(year,month,0).getDate() - (date.getDate() - 14)
			}else {
				year = date.getFullYear()
				month = date.getMonth()
				day = new Date(year,month,0).getDate() + (date.getDate() - 14)
			}
		}else {
			year = date.getFullYear()
			month = date.getMonth() + 1
			day = date.getDate() - 14
		}
		this.listQuery.start = year + '-' + month + '-' + day
		this.listQuery.end = date.getFullYear() + '-' + (date.getMonth()+1) + '-' + date.getDate()
        this.getTableData()
    },
    methods: {
      	handleSearch() {
			console.log(this.timers)
			if(this.timers) {
				this.listQuery.start = this.timers[0]
				this.listQuery.end = this.timers[1]
			}else {
				this.listQuery.start = undefined
				this.listQuery.end = undefined
			}
			this.listQuery.pool_id = this.$route.query.poolId
			this.getTableData()
		},
		handleReset() {
			this.timers = ''
			this.listQuery.start = undefined
			this.listQuery.end = undefined
		},
    
        // 网络请求
        /**
         * getTableData
         * @desc 获取表格数据
         */
        async getTableData() {
            this.loading = true
            for (let key in this.listQuery) {
                this.listQuery[key] = this.listQuery[key] === '' ? undefined : this.listQuery[key]
            }
            const detail = await statistics(this.listQuery)
            if (detail.code === 200) {
				this.info.income = 0
				this.info.outcome = 0
				this.info.once = 0
				this.info.ten_times = 0
				this.info.hundred_times = 0
                this.tableData = detail.data
				for(let item of this.tableData) {
					this.info.income += item.income
					this.info.outcome += item.outcome
					this.info.once += item.once
					this.info.ten_times += item.ten_times
					this.info.hundred_times += item.hundred_times
				}
				// this.info.income = detail.data[0].income
				// this.info.outcome = detail.data[0].outcome
				// this.info.once = detail.data[0].once
				// this.info.ten_times = detail.data[0].ten_times
				// this.info.hundred_times = detail.data[0].hundred_times
                // this.listQuery.page = detail.data.current_page
                // this.total = detail.data.total
                // this.listQuery.perPage = Number(detail.data.per_page)
            }
            this.loading = false
        },
    }
  }
</script>
  
<style lang="scss" scoped>
.infoBox {
	margin-top: 15px;
	display: flex;
	align-items: center;

	.info {
		display: flex;
		align-items: center;

		margin-right: 15px;
	}
}
::v-deep {
	.el-input__inner {

		width: 400px !important;
	}
}
</style>
  